<template>
    <Layout>
        <Form ref="queryForm" :label-width="120">
            <Row class="query-form">
                <Col span="8">
				  <FormItem label='操作账号：' prop='loginId'>
					  <Input class='query-form-el' placeholder="请填写操作用户账号" type='text' v-model='dataToQuery.loginId'></Input>
				  </FormItem>
                </Col>
                <Col span="8">
					<FormItem label='用户名称：' prop='userName'>
						<Input class='query-form-el' placeholder="请填写操作用户名称" type='text' v-model='dataToQuery.userName'></Input>
					</FormItem>
                </Col>
				<Col span="8" v-if="!switchFlag">
					<Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>
					<Button @click="reset" class="ivu-btn-reset">重置</Button>
					<Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
				</Col>
				<Col span="8" v-else>
					<FormItem label='请求方法：'>
						<Input class='query-form-el' type='text' v-model='dataToQuery.method'></Input>
					</FormItem>
				</Col>
            </Row>
			<Row v-show="switchFlag" class="query-form">
				<Col span="8">
					<FormItem label='请求路径：'>
						<Input class='query-form-el' type='text' v-model='dataToQuery.requestUrl'></Input>
					</FormItem>
				</Col>
				<Col span="8" offset="8">
					<Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
					<Button @click="reset" class="ivu-btn-reset">重置</Button>
					<Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
				</Col>
			</Row>
        </Form>
		<Table ref='table' :height="tableHeight" :row-class-name="rowClassName" no-data-text="没有查询到相关数据!" @on-selection-change = 'getSelectRows' :loading='pageStatus.loading || pageStatus.baseLoading'
		       border :columns="columns1"  :data="dataTable" >
		</Table>
		<Row style="margin-right:10px;">
		  <Col span="24" >
		    <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
		  </Col>
		</Row>
    </Layout>
</template>

<script>
import {Api} from '@/api/index.js'
import {sessionStorage} from '@/common/cacheUtils.js';
import pageCommonFunction from '@/components/pageCommonFunction.js'
    export default {
        data() {
            return {
				...this.createCommonDataField(),
                columns1: [
                    {title: '序号', width: 70, fixed: 'left', align: 'center', render: this.indexColumnsRender},
                    { key:'loginId',title: '操作账号',  align: 'center', minWidth: 100,  },
                    { key:'userName',title: '用户名称',  align: 'center', minWidth: 100,  },
                    { key:'method',title: '请求方法',  align: 'center', minWidth: 160,  },
                    { key:'requestUrl',title: '请求路径',  align: 'center', minWidth: 140,  },
                    { key:'requestType',title: '请求类型',  align: 'center', minWidth: 90,  },
                    { key:'requestParam',title: '请求参数',  align: 'center', minWidth: 120,  tooltip:true  },
                    { key:'responseText',title: '响应文本',  align: 'center', minWidth: 120, tooltip:true },
                    // { key:'logContent',title: '日志内容',  align: 'center', minWidth: 120,  },
                    { key:'ip',title: '设备IP',  align: 'center', minWidth: 120,  },
                    { key:'devicePlat',title: '设备平台',  align: 'center', minWidth: 90,  },
                    { key:'costTime',title: '耗时(毫秒)',  align: 'center', minWidth: 100,  },
                    { key:'createTime',title: '创建时间',  align: 'center', minWidth: 150,  render: this.renderCellDateTime },
				],
				tableHeight:10,
				queryUrl:Api.queryBaseLog,
            }
        },
		async mounted() {
		  this.setTableHeight();
		  this.query();
		},
        methods: {
			...pageCommonFunction,
			query() {
				this.queryAjax();
			}
        }
    }
</script>

<style lang='css' scoped>
	@import '../../../index.css';
</style>
